<template>
  <div class="row" :style="'width:'+width">
    <div class="header" :style="'text-align:'+ align">
       {{ title }}
    </div>
    <div class="body">
       <div class="content" :style="'height:' +  height +';text-align:'+ align" v-for="(item,index) in data" :key="index">
         <slot :$index="index" :row="item"></slot>
       </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'iule-table-item',
  props: {
    data: {
      type: Array,
      default: () => {
        return []
      }
    },
    title: {
      type: String,
      default: ''
    },
    width: {
      type: String,
      default: '2rem'
    },
    height: {
      type: String,
      default: '1rem'
    },
    keyDesc: {
      type: String,
      default: null
    },
    align: {
      type: String,
      default: 'center'
    }
  },
  data () {
    return {
    }
  }
}
</script>

<style scoped>
.row {
  font-size: 0.39rem;
  color: rgba(51,51,51,1);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 2rem;
  text-align: center;
}
.header {
  color:rgba(153,153,153,1);
  font-size: 0.39rem;
  height:0.8rem;
  margin-top: 0.5rem;
}
.content {
  margin: 0 auto 0.1rem;
}
</style>
